// 1. React核心库
import React from 'react';

// 2. UI组件库 - 按字母顺序
import { Tag, Typography } from 'antd';

// 4. 专业组件库
import { ProDescriptions } from '@ant-design/pro-components';

// 5. 工具库
import dayjs from 'dayjs';

// 8. API和类型
import type { AIProvider } from '@/services/generated';

const { Paragraph } = Typography;

interface ProviderDetailProps {
  data: AIProvider | null;
}

const ProviderDetail: React.FC<ProviderDetailProps> = ({ data }) => {
  if (!data) {
    return <div>暂无数据</div>;
  }

  // 提供商类型映射
  const providerTypeMap = {
    openai: { color: 'blue', text: 'OpenAI' },
    anthropic: { color: 'green', text: 'Anthropic' },
    google: { color: 'orange', text: 'Google' },
    custom: { color: 'default', text: '自定义' },
  };

  const providerType = providerTypeMap[data.provider_type as keyof typeof providerTypeMap];

  return (
    <ProDescriptions
      column={2}
      title="提供商详情"
      dataSource={data}
      columns={[
        {
          title: 'ID',
          dataIndex: 'id',
          span: 1,
        },
        {
          title: '提供商名称',
          dataIndex: 'name',
          span: 1,
        },
        {
          title: '提供商类型',
          dataIndex: 'provider_type',
          span: 1,
          render: () => (
            <Tag color={providerType?.color}>{providerType?.text}</Tag>
          ),
        },
        {
          title: '状态',
          dataIndex: 'is_active',
          span: 1,
          render: (value) => (
            <Tag color={value ? 'green' : 'red'}>
              {value ? '启用' : '禁用'}
            </Tag>
          ),
        },
        {
          title: 'API端点',
          dataIndex: 'api_endpoint',
          span: 2,
          render: (value) => (
            <Paragraph copyable ellipsis={{ rows: 1, expandable: true }}>
              {value}
            </Paragraph>
          ),
        },
        {
          title: 'API密钥',
          dataIndex: 'api_key',
          span: 2,
          render: (value) => (
            <Paragraph copyable={{ text: String(value) }}>
              {'*'.repeat(20) + (String(value)?.slice(-4) || '')}
            </Paragraph>
          ),
        },
        {
          title: '是否公开',
          dataIndex: 'is_public',
          span: 1,
          render: (value) => (
            <Tag color={value ? 'blue' : 'default'}>
              {value ? '公开' : '私有'}
            </Tag>
          ),
        },
        {
          title: '创建时间',
          dataIndex: 'created_at',
          span: 1,
          render: (value) => {
            if (!value || typeof value !== 'string') return '-';
            const date = dayjs(value);
            return date.isValid() ? date.format('YYYY-MM-DD HH:mm:ss') : '-';
          },
        },
        {
          title: '更新时间',
          dataIndex: 'updated_at',
          span: 1,
          render: (value) => {
            if (!value || typeof value !== 'string') return '-';
            const date = dayjs(value);
            return date.isValid() ? date.format('YYYY-MM-DD HH:mm:ss') : '-';
          },
        },
        {
          title: '创建者',
          dataIndex: 'created_by',
          span: 1,
          render: (value) => value || '系统',
        },
        {
          title: '默认参数',
          dataIndex: 'default_params',
          span: 2,
          render: (value) => (
            <Paragraph>
              <pre style={{ 
                background: '#f5f5f5', 
                padding: '8px', 
                borderRadius: '4px',
                fontSize: '12px',
                maxHeight: '200px',
                overflow: 'auto'
              }}>
                {JSON.stringify(value || {}, null, 2)}
              </pre>
            </Paragraph>
          ),
        },
      ]}
    />
  );
};

export default ProviderDetail;
